{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static 'login/css/login.css' %}" rel="stylesheet"/>
    <title>登录</title>
</head>

<body>
{#    <div style="margin: 15% 40%">#}
{#        <h1>欢迎登录</h1>#}
{#        <form action="/login/" method="post">#}
{#            <p>#}
{#                <label for="id_username">用户名：</label>#}
{#                <input type="text" id="id_username" name="username" placeholder="点击输入用户" autofocus required >#}
{#            </p>#}
{#            <p>#}
{#                <label for="id_password">密码：</label>#}
{#                <input type="password" id="id_password" name="password" placeholder="点击输入密码" required>#}
{#            </p>#}
{#            <input type="submit" value="确定">#}
{#        </form>#}
{##}
{##}
{#    </div>#}


    <div class="container">
        <div class="col">
            <form class="form-login" action="/login/" method="post">
                {% if login_form.captcha.errors %}
                    <div class="alert alert-warning">{{ login_form.captcha.errors }}</div>
                {% elif message %}
                    <div class="alert alert-warning">{{ message }}</div>
                {% endif %}
                {% csrf_token %}
                <h3 class="text-center">欢迎登录</h3>





{#                手动生成表单，对于多字段不友好#}

{#                <div class="form-group">#}
{#                    <label for="id_username">用户：</label>#}
{#                    <input type="text" class="form-control" id="id_username" name="username" placeholder="点击输入用户" autofocus required>#}
{#                </div>#}
{#                <div class="form-group">#}
{#                    <label for="id_password">密码：</label>#}
{#                    <input type="password" class="form-control" id="id_password" name="password" placeholder="点击输入密码" required>#}
{#                </div>#}

{#                forms自动生成表单#}
                {{ login_form }}
{#                <div class="form-control">#}
{#                    {{ login_form.username.label_tag }}#}
{#                    {{ login_form.username }}#}
{#                </div>#}
{##}
{#                <div class="form-control">#}
{#                    {{ login_form.password.label_tag }}#}
{#                    {{ login_form.password }}#}
{#                </div>#}
{#                <div class="form-group">#}
{#                    {{ login_form.captcha.label_tag }}#}
{#                    {{ login_form.captcha }}#}
{#                </div>#}



                <div>
                    <a href="/register/" class="text-success"><ins>新用户注册</ins></a>
                    <button type="submit" class="btn btn-primary float-right">登录</button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>



</body>